<template>
  <el-card class="dashboard">
    <div class="order">
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>今日订单数</span>
          </div>
        </template>
        <div class="item">1888</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>今日日活</span>
          </div>
        </template>
        <div class="item">36271</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>转化率</span>
          </div>
        </template>
        <div class="item">20%</div>
      </el-card>
    </div>
    <div id="zoom"></div>
    <div id="columnar"></div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from "vue";
// 相当于在setup获取当前的this -- proxy就是当前的实例对象
const { proxy } = getCurrentInstance();

let myChartZoom = ref(null);
let myChartColumnar = ref(null);

onMounted(() => {
  //   if (window.echarts) {

  // 基于准备好的dom，初始化echarts实例
  // myChart = window.echarts.init(document.getElementById("zoom"));
  myChartZoom.value = proxy["$echarts"].init(document.getElementById("zoom"));

  // 指定图表的配置项和数据
  const zoomOption = {
    title: {
      text: "系统折线图",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["新增注册", "付费用户", "活跃用户", "订单数", "当日总收入"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: [
          "2021-03-11",
          "2021-03-12",
          "2021-03-13",
          "2021-03-14",
          "2021-03-15",
          "2021-03-16",
          "2021-03-17",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "新增注册",
        type: "line",
        stack: "总量",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "付费用户",
        type: "line",
        stack: "总量",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "活跃用户",
        type: "line",
        stack: "总量",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "订单数",
        type: "line",
        stack: "总量",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "当日总收入",
        type: "line",
        stack: "总量",
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChartZoom.value.setOption(zoomOption);
  //   }

  // 初始化
  myChartColumnar.value = proxy["$echarts"].init(
    document.getElementById("columnar")
  );

  const columnarOption = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChartColumnar.value.setOption(columnarOption);
});
onUnmounted(() => {
  myChartZoom.value.dispose();
  myChartColumnar.value.dispose();
});
</script>

<style scoped>
.dashboard .order {
  display: flex;
  margin-bottom: 50px;
}
.dashboard .order .order-item {
  flex: 1;
  margin-right: 20px;
}
.dashboard .order .order-item:last-child {
  margin-right: 0;
}
#zoom,
#columnar {
  min-height: 300px;
}
</style>
